import PropTypes from 'prop-types'
import React, { memo } from 'react'
import { TabWrapper } from './style'
import classNames from 'classnames'

const SearchTabs = memo((props) => {
  const { titles, tabClick, tabIndex } = props
  return (
    <TabWrapper>
      {titles.map((item, index)=>(
        <div className={classNames("item", {active:index === tabIndex})} key={item} onClick={e => tabClick(index)}>{item}</div>
      ))}
    </TabWrapper>
  )
})

SearchTabs.propTypes = {
  titles: PropTypes.array,
  tabClick: PropTypes.func,
  tabIndex:PropTypes.number
}

export default SearchTabs